<template>
  <div class="card-list">
    <a-list
      :grid="{ gutter: 24, lg: 3, md: 2, sm: 1, xs: 1 }"
      :dataSource="dataSource"
    >
      <a-list-item slot="renderItem" slot-scope="item">
        <template v-if="item.add">
          <a-button class="new-btn" type="dashed" @click="addNew">
            <a-icon type="plus" />新增
          </a-button>
        </template>

        <template v-else>
          <a-popover :title="'轮播图id:' + item.id" class="meta-content">
            <template slot="content">
              <p>所属位置:{{ formmater(item.site_id) }}</p>
              <!-- <p>
                超链接:<a :href="item.hyperlink" target="_blank">{{
                  item.hyperlink
                }}</a>
              </p> -->
            </template>
            <a-card :hoverable="true">
              <template v-if="item.s_photos && item.s_photos[0]">
                <a-avatar
                  shape="square"
                  class="card-avatar"
                  slot="cover"
                  :src="item.s_photos[0].path"
                  size="large"
                />
                <a slot="actions" @click="preview(item.s_photos[0].path)">
                  预览
                </a>
              </template>
              <template v-else>
                <a-avatar
                  shape="square"
                  class="card-avatar"
                  slot="cover"
                  :src="item.url"
                  size="large"
                />
                <a slot="actions" @click="preview(item.url)">
                  预览
                </a>
              </template>
              <a slot="actions" @click="edit(item)">编辑</a>
              <a slot="actions" @click="del(item)">删除</a>
            </a-card>
          </a-popover>
        </template>
      </a-list-item>
    </a-list>
  </div>
</template>

<script>
let dataSource = [];
dataSource.push({
  add: true,
});

export default {
  name: 'CardList',
  props: ['carouselList', 'carouselGroupList'],
  created() {
    this.dataSource = dataSource.concat(this.carouselList);
  },
  data() {
    return {
      dataSource,
    };
  },
  methods: {
    addNew() {
      this.$emit('addNew');
    },
    edit(item) {
      this.$emit('edit', item);
    },
    del(item) {
      this.$emit('del', item);
    },
    preview(src) {
      this.$emit('imgpreview', src);
    },
    formmater(id) {
      let temp = this.carouselGroupList.map((item) => {
        if (item.value === id) {
          return item.label;
        }
      });
      return temp[0];
    },
  },
  watch: {
    carouselList(newVal) {
      this.dataSource = [
        {
          add: true,
        },
        ...newVal,
      ];
    },
  },
};
</script>

<style lang="less" scoped>
.card-avatar {
  width: 100%;
  height: 200px;
}
.new-btn {
  border-radius: 2px;
  width: 100%;
  height: 200px;
}
.meta-content {
  position: relative;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
</style>
